import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0
//import QtQuick.Window 2.0

Rectangle {
    property int getting_width: 800
    property int getting_height: 480
    property string bg_color: "Lightsteelblue"
    property string tf_text_color: "#6d300b"
    property string bg_sell: "Dodgerblue"
    property string brd_sell: "white"
    property string text_sell: "white"
    property string grid_line_color: "Darkslateblue"
    property string scale_color: "Dodgerblue"
    property string scale_text_color: "Darkslateblue"

    width: getting_width
    height: getting_height

    Rectangle
    {
        id:background
        width: getting_width
        height:getting_height
        anchors.fill: parent
        color:bg_color
    }
    Rectangle
    {

        id: grid
        anchors.fill: background
        color: "transparent"
        anchors.leftMargin: 35
        anchors.rightMargin: -5
        property int bM:30
        property int bw:40
        property int h:1
        property real op:0.2
        property string clr:grid_line_color
        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.bottomMargin: grid.bM
            width: background.width-grid.bw
            height: grid.h
            color: grid.clr
            opacity: grid.op
        }
        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.bottomMargin:background.height/11*1+ grid.bM
            width: background.width-grid.bw
            height: grid.h
            color: grid.clr
            opacity: grid.op
        }
        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.bottomMargin:background.height/11*2+ grid.bM
            width: background.width-grid.bw
            height: grid.h
            color: grid.clr
            opacity: grid.op
        }
        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.bottomMargin:background.height/11*3+ grid.bM
            width: background.width-grid.bw
            height: grid.h
            color: grid.clr
            opacity: grid.op
        }
        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.bottomMargin:background.height/11*4+ grid.bM
            width: background.width-grid.bw
            height: grid.h
            color: grid.clr
            opacity: grid.op
        }
        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.bottomMargin:background.height/11*5+ grid.bM
            width: background.width-grid.bw
            height: grid.h
            color: grid.clr
            opacity: grid.op
        }
        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.bottomMargin:background.height/11*6+ grid.bM
            width: background.width-grid.bw
            height: grid.h
            color: grid.clr
            opacity: grid.op
        }
        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.bottomMargin:background.height/11*7+ grid.bM
            width: background.width-grid.bw
            height: grid.h
            color: grid.clr
            opacity: grid.op
        }
        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.bottomMargin:background.height/11*8+ grid.bM
            width: background.width-grid.bw
            height: grid.h
            color: grid.clr
            opacity: grid.op
        }
        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.bottomMargin:background.height/11*9+ grid.bM
            width: background.width-grid.bw
            height: grid.h
            color: grid.clr
            opacity: grid.op
        }

    }
    Component {
        id: delegate
        Rectangle {
            property int _sell_height:25
            width: 20
            height:h
            color:bg_sell
            border.color:brd_sell
            anchors.bottom: parent.bottom
            Text
            {
                anchors.fill: parent
                color: text_sell
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text:quant
            }
        }
    }
    ListView {
        id: grid_view1
        width: getting_width
        height: getting_height
        anchors.horizontalCenterOffset: 0
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        anchors.left: parent.left
        anchors.leftMargin: 40
        anchors.right:  parent.right
        anchors.rightMargin: 20
        spacing: -1
        orientation: Qt.Horizontal
        layoutDirection: "LeftToRight"
        model: grid_model
        delegate: delegate
    }
    Rectangle
    {
        id: vert_scale
        width: 2
        height: parent.height
        //   opacity: 0.5
        color:grid_line_color
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        anchors.left: parent.left
        anchors.leftMargin: 35
    }
    Rectangle
    {
        id: vert_scale_legend
        property real val_scale:1

        width: 35
        height: parent.height
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        color:scale_color
        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.bottomMargin: grid.bM+14
            anchors.left: parent.left
            anchors.leftMargin: 10
            width: parent.width-10
            height: grid.h
            color: "#c6e2ff"

            Text
            {
                anchors.bottom: parent.top
                text:"1"
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 12
                color: "white"
            }

        }
        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.bottomMargin: background.height/11*1+grid.bM+13
            anchors.left: parent.left
            anchors.leftMargin: 10
            width: parent.width-10
            height: grid.h
            color: grid.clr
            // opacity: grid.op

            Text
            {
                anchors.bottom: parent.top
                text:"2"
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 12
            }
        }
        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.bottomMargin: background.height/11*2+grid.bM+13
            anchors.left: parent.left
            anchors.leftMargin: 10
            width: parent.width-10
            height: grid.h
            color: grid.clr
            // opacity: grid.op
            Text
            {
                anchors.bottom: parent.top
                text:"3"
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 12
            }
        }
        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.bottomMargin: background.height/11*3+grid.bM+13
            anchors.left: parent.left
            anchors.leftMargin: 10
            width: parent.width-10
            height: grid.h
            color: grid.clr
            // opacity: grid.op
            Text
            {
                anchors.bottom: parent.top
                text:"4"
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 12
            }
        }
    }
    Rectangle
    {
        id: hor_scale
        width: parent.width-10
        height: 2
        //  opacity: 0.5
        color:grid_line_color
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 30
        anchors.left: parent.left
        anchors.leftMargin: 35
    }
    Rectangle
    {
        id: hor_scale_legend
        width: parent.width
        height: 30
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0

        color:scale_color
    }
}



